<template>
  <div class="container">
    <swiper :options="swiperOption" class="hot_swiper" v-if="swiperSlides.length > 1" >
      <swiper-slide   v-for="(item,index) in swiperSlides" :key="index">
        <img :src="item.src" alt="pictrue" class="swp">
      </swiper-slide>
    </swiper>
    <swiper :options="swiperOption" class="hot_swiper" v-else >
        <img :src="img" alt="pictrue" class="swp">
    </swiper>
    <div class="notice">
      <img src="../../assets/icon/notice.png" alt="">
      <swiper :options="noticeOption" class="notice_swiper" v-if="notice.length > 1" >
        <swiper-slide   v-for="(item,index) in notice" :key="index">
         <li class="noticeContent">{{item}}</li>
        </swiper-slide>
      </swiper>
    </div>
    <div class="numData">
      <div class="DataOne"  v-show="isLoading" v-for="item in goodsData" @click="goPages(item.pid)">
        <p class="one" v-if="item.bfb>0" style="color: #4BAC92 !important;">{{item.Price}} </p>
        <p class="one" v-else style="color:  #D04B63; !important;">{{item.Price}} </p>
        <p class="two" v-if="item.bfb>0" style="color: #4BAC92 !important;">+{{item.bfb}}%</p>
        <p class="two" v-else style="color:  #D04B63 !important;">-{{item.bfb}}%</p>
        <p class="three">≈{{item.Price}}USD</p>
      </div>
      <div class="DataOne" v-show="!isLoading" v-for="item in defaultData" @click="goPages(item.pid)">
        <p class="one" v-if="item.bfb>0" style="color: #4BAC92 !important;">{{item.Price}} </p>
        <p class="one" v-else style="color:  #D04B63; !important;">{{item.Price}} </p>
        <p class="two" v-if="item.bfb>0" style="color: #4BAC92 !important;">+{{item.bfb}}%</p>
        <p class="two" v-else style="color:  #D04B63 !important;">-{{item.bfb}}%</p>
        <p class="three">≈{{item.Price}}USD</p>
      </div>

    </div>
    <div class="banner">
      <img src="../../assets/img/ad.png" alt="" class="bannerImg">
    </div>
    <div class="funService">
     <h6>功能服務</h6>
      <router-link to="/trade" slot="left">
     <div class="funOne">
       <img src="../../assets/icon/file.png" alt="">
       <p class="zi">交易指引</p>
       <img src="../../assets/icon/arrow.png" alt="">
     </div>
        </router-link>
      <router-link to="/deposid" slot="left">
     <div class="funOne">
       <img src="../../assets/icon/file.png" alt="">
       <p class="zi">入金引遵</p>
       <img src="../../assets/icon/arrow.png" alt="">
     </div>
      </router-link>
   </div>
    <div class="DataList">
      <h6>漲幅榜</h6>
      <div class="container">
        <div class="head">
          <div class="head-left">名稱</div>
          <div class="head-center">最新價格</div>
          <div class="head-right"> 漲跌幅</div>
        </div>
        <div class="goods" v-show="isLoading" v-for="item in goodsData" @click="goPages(item.pid)">
          <div class="number">
            <div class="number-name">{{item.ptitle}}</div>
            <div class="number-price" >{{item.Price}}</div>
            <div class="number-change">
              <div class="number-bg" v-if="item.bfb>0" style="background: #4BAC92">+{{item.bfb}}%</div>
              <div class="number-bg" v-else style="background:  #D04B63">-{{item.bfb}}%</div>
            </div>
          </div>
          <div class="line"></div>
        </div>

        <div class="goods" v-show="!isLoading" v-for="item in defaultData" @click="goPages(item.pid)">
          <div class="number">
            <div class="number-name">{{item.ptitle}}</div>
            <div class="number-price" >{{item.Price}}</div>
            <div class="number-change">
              <div class="number-bg" v-if="item.bfb>0" style="background: #4BAC92">+{{item.bfb}}%</div>
              <div class="number-bg" v-else style="background:  #D04B63">-{{item.bfb}}%</div>
            </div>
          </div>
          <div class="line"></div>
        </div>
      </div>
    </div>

  <tabar :timer="timer" :isCheck="1" ></tabar>
  </div>
  </template>

<script>
    import {getUserInfo} from "../../api/getUserInfo";
    import Tabar from '../../components/tabbar'
    import {getIndex} from '../../api/indexData';
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    import bgOne from '../../assets/img/back/ad.png';
    import bgTwo from '../../assets/img/back/ad2.png';
    import bgThree from '../../assets/img/back/ad3.png';
    require("swiper/dist/css/swiper.css");

    export default {
        data() {
            return {
                swiperOption: {      // swiper4的写法哟！
                    autoplay: {       // 自动轮播
                        delay: 3000,
                        disableOnInteraction: false,
                    },
                    slidesPerView: 1,   // 一次轮播放几张图
                    loop: true       // 无限轮播
                },
                noticeOption: {      // swiper4的写法哟！
                    autoplay: {       // 自动轮播
                        delay: 3000,
                        disableOnInteraction: false,
                    },
                    direction: 'vertical',
                    slidesPerView: 1,   // 一次轮播放几张图
                    loop: true       // 无限轮播
                },
                swiperSlides: [{src:bgOne},
                    {src:bgTwo},
                    {src:bgThree}
                   ],
                img: bgOne,
                notice:['Coin Word 全球竞赛獲獎者公告',
                    '【安全策略升級】關于API重置的通知',
                    'Coin Word合作夥伴,數字貨幣監控強勢加盟'],
                goodsData:{},
                isLoading:false,

                timer:null,
                 // 首页默认数据
                defaultData:{
                      0:{
                        pid:12,
                        Price:0,
                        bfb:0,
                        ptitle:'BTC'
                      },
                      1:{
                        pid:17,
                        Price:0,
                        bfb:0,
                        ptitle:'ETH'
                      },
                      2:{
                        pid:6,
                        Price:0,
                        bfb:0,
                        ptitle:'USDT'
                      },
                }
            }
        },
        components:{
            swiper,
            swiperSlide,
            Tabar
        },
        methods:{
        goodsInfo(){
          getIndex().then((data)=>{
            this.goodsData=data;
            this.isLoading=true
          })
        },
          //进k线页面
          goPages: function (pid) {
              this.$router.push({
                name: 'kine',
                query: {
                  pid: pid,

                  indexTimer:this.timer
                }
              })

          }


      },
        mounted() {

            if (!window.localStorage.getItem('userInfo')) {
                this.$router.push({path:'/'})
            }else {
                this.userInfo=JSON.parse(window.localStorage.getItem('userInfo'))
                 getUserInfo({
                   uid:this.userInfo.uid
                 }).then((data)=>{
                   if (data.errorCode==0){
                     window.localStorage.setItem('userInfo',JSON.stringify(data.data))
                   }
                 });
                this.timer=setInterval(this.goodsInfo,1500)

            }

        },
    }

</script>
<style  scoped lang="scss">
  .container{
    width: 375px;
    height: 100%;
  }
  .hot_swiper{
    margin: 0 auto;
    width: 375px;
    height: 150px;
  }
.swp{
  width: 375px;
  height: 150px;
}
  .notice{
    display: flex;
    flex-direction: row;
    width: 97%;
    height: 30px;
    border-bottom: 2px solid #f3f3f3;
    margin-left: 10px;
    align-items: center;
  }
  .noticeContent{
    font-weight: bold;
  }
  .notice_swiper{
    height: 20px;
  }
  .numData{
    height: 100px;
    display: flex;
    flex-direction: row;
    flex: 1;
  }
  .DataOne{
    width: 125px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .one{
    font-size: 18px;
    color: #4BAC92;
  }
  .two{
    font-size: 10px;
    color: #4BAC92;
  }
  .three{
    font-size: 12px;
    color: black;
  }
  .banner{
    img{
      width: 375px;
      height: 80px;
    }
    width: 375px;
    height: 80px;
  }
  .funService{
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    img{
      width: 14px;
      height: 14px;
    }
    .funOne{
      margin-top: 10px;
      margin-left: 16px;
      display: flex;
      flex-direction: row;
      height: 30px;
      align-items: center;
      img{
          width: 11px;
          height: 14px;
      }
    }
    .zi{
     margin-left: 10px;
      margin-right: 245px;font-size: 13px;
    }
  }

  h6{
    margin-left: 16px;
    font-size: 14px;
    color: lightblue;
  }
  .DataList{
    padding-bottom: 120px;
  }

</style>
<style scoped >
  .container {
    width: 375px;
  }

  .head {
    width: 375px;
    height: 50px;
    font-size: 10px;
    display: flex;
    flex-direction: row;
    line-height: 50px;
    align-items: center;
    justify-content: center;
  }


  .head-left {
    width: 108px;
  }

  .head-center {
    width: 108px;
  }

  .head-right {
    padding-left: 50px;
    width: 108px;
  }

  .goods {
    width: 375px;
    display: flex;
    height: 60px;
    flex-direction: column;
  }

  .number {
    display: flex;
    flex-direction: row;
    height: 50px;
    font-size: 14px;
    line-height: 50px;
  }

  .number-name {
    width: 30%;
    margin-left: 16px;
  }

  .number-price {
    width: 30%;
  }

  .number-change {
    width: 24%;
    position: relative;
    left: 30px;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center
  }

  .number-bg {
    background-color: #4BAC92;
    font-weight: bold;
    display: flex;
    width: 80px;
    height: 26px;
    justify-content: center;
    align-items: center
  }

  .line {
    width: 350px;
    height: 2px;
    margin-left: 10px;
    background-color: #ccc;
  }

</style>
